<script setup lang="ts">
  import { computed, CSSProperties } from 'vue'

  defineOptions({
    name: 'CustomTitle8',
  })

  const props = defineProps({
    title: {
      type: String,
      default: () => '这是标题',
    },
    titleColor: {
      type: String,
      default: () => '#007cff',
    },
    desc: {
      type: String,
      default: () => '',
    },
    dividerColor: {
      type: String,
      default: () => '#007cff',
    },
  })

  const lineStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      opacity: '0.15',
      height: '28px',
      position: 'absolute',
      right: '0',
      left: '0',
      bottom: '0',
      'border-radius': '16px 16px 0 0',
    }
  })

  const titleStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      color: props.titleColor,
      fontWeight: 600,
      height: '100%',
      lineHeight: '38px',
      padding: '0 1px',
      textAlign: 'center',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
    }
  })

  const leftBorder = computed<CSSProperties>(() => {
    return {
      width: '21px',
      backgroundColor: props.dividerColor,
      borderRadius: '0 0 0 16px',
      bottom: '0',
      left: '18px',
      position: 'absolute',
      top: '0',
    }
  })

  const rightBorder = computed<CSSProperties>(() => {
    return {
      width: '21px',
      backgroundColor: props.dividerColor,
      borderRadius: '0 0 16px',
      bottom: '0',
      right: '18px',
      position: 'absolute',
      top: '0',
    }
  })

  const leftTriangleStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      height: '10px',
      left: '0',
      position: 'absolute',
      top: '0',
      transform: 'skew(-60deg) translateX(50%)',
      width: '18px',
    }
  })

  const rightTriangleStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      height: '10px',
      right: '0',
      position: 'absolute',
      top: '0',
      transform: 'skew(60deg) translateX(-50%)',
      width: '18px',
    }
  })
</script>

<template>
  <div class="custom-title8">
    <div class="title-container">
      <div class="color-block">
        <div class="title" :style="titleStyle">{{ props.title }}</div>
        <div class="left-triangle" :style="leftTriangleStyle"></div>
        <div class="left-border" :style="leftBorder"></div>
        <div class="right-triangle" :style="rightTriangleStyle"></div>
        <div class="right-border" :style="rightBorder"></div>
      </div>
      <div class="line" :style="lineStyle"></div>
    </div>
    <div v-if="props.desc" class="desc">{{ props.desc }}</div>
  </div>
</template>

<style scoped lang="scss">
  .custom-title8 {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 8px;

    .title-container {
      width: 100%;
      position: relative;
      height: 38px;
      display: flex;
      justify-content: center;

      .color-block {
        box-sizing: border-box;
        max-width: 50%;
        min-width: 7%;
        padding: 0 38px;
        position: relative;
      }
    }

    .desc {
      color: gray;
    }
  }
</style>
